import React, { useState } from 'react';
import './index.less';
import {
  InputNumber,
  Input,
  Select,
  Radio,
  DatePicker,
  Button,
  TreeSelect,
} from 'antd';

export default function Index() {
  // 点击所属省份 更改所属市区
  const provinceData = ['北京市', '河北省', '天津市'];
  const cityData = {
    北京市: ['东城区', '西城区', '朝阳区'],
    河北省: ['石家庄市', '唐山市', '秦皇岛市'],
    天津市: ['和平区', '河东区', '河西区'],
  };
  const [cities, setCities] = useState(cityData[provinceData[0]]);
  const [secondCity, setSecondCity] = useState(cityData[provinceData[0]][0]);
  const handleProvinceChange = (value) => {
    setCities(cityData[value]);
    setSecondCity(cityData[value][0]);
  };
  const onSecondCityChange = (value) => {
    setSecondCity(value);
  };
  // 性别单选框
  const [danger, setDanger] = useState('男');
  const onChange = (e) => {
    console.log('radio checked', e.target.value);
    setDanger(e.target.value);
  };
  const onChangeDate = (date, dateString) => {
    console.log(date, dateString);
  };
  // 供应商类别
  const treeData = [
    {
      title: '汽车行业',
      value: '汽车行业',
      disabled: true,
      children: [
        {
          title: '原料供应商',
          value: '原料供应商',
        },
        {
          title: '零部件供应商',
          value: '零部件供应商',
        },
        {
          title: '汽车制造商',
          value: '汽车制造商',
        },
      ],
    },
    {
      title: '医疗行业',
      value: '医疗行业',
      disabled: true,
      children: [
        {
          title: '医疗材料供应商',
          value: '医疗材料供应商',
        },
        {
          title: '医疗设备供应商',
          value: '医疗设备供应商',
        },
      ],
    },
    {
      title: '工程行业',
      value: '工程行业',
      disabled: true,
      children: [
        {
          title: '工程材料供应商',
          value: '工程材料供应商',
        },
        {
          title: '工程设备供应商',
          value: '工程设备供应商',
        },
      ],
    },
    {
      title: '电子行业',
      value: '电子行业',
      disabled: true,
      children: [
        {
          title: '电子材料供应商',
          value: '电子材料供应商',
        },
        {
          title: '电子设备供应商',
          value: '电子设备供应商',
        },
      ],
    },
    {
      title: '食品行业',
      value: '食品行业',
      disabled: true,
      children: [
        {
          title: '食品材料供应商',
          value: '食品材料供应商',
        },
        {
          title: '食品添加剂供应商',
          value: '食品添加剂供应商',
        },
        {
          title: '食品包装材料供应商',
          value: '食品包装材料供应商',
        },
        {
          title: '食品成品供应商',
          value: '食品成品供应商',
        },
      ],
    },
  ];
  const [supplier, setSupplier] = useState();
  const onChangesupplier = (newValue) => {
    console.log(newValue);
    setSupplier(newValue);
  };
  return (
    <div className="supplice">
      <div className="suptop">
        <a href="#">
          <span>保存</span>
        </a>
        <a href="#">
          <span>保存且新增</span>
        </a>
        <a href="#">
          <span>草稿箱</span>
        </a>
        <span className="sx">|</span>
        <a href="#">
          <span>导入</span>
        </a>
      </div>
      <div className="supbody">
        <div className="bodymid">
          <h3>供应商档案</h3>
        </div>
        {/* 基本信息 */}
        <table border="1" cellSpacing={1} cellPadding={1}>
          <tr height="36" className="thead">
            <td colSpan={8} align="left">
              基本信息
            </td>
          </tr>

          <tr height="47">
            <td className="right">供应商名称：</td>
            <td align="center">
              {' '}
              <Input style={{ width: '166px' }} />
            </td>
            <td className="right"> 供应商编号： </td>
            <td align="center">
              {' '}
              <Input
                style={{ width: '166px' }}
                disabled={true}
                placeholder="保存后自动生成"
              />{' '}
            </td>
            <td className="right"> 供应商类别： </td>
            <td align="center">
              {' '}
              <TreeSelect
                style={{ width: '166px', textAlign: 'left' }}
                defaultValue="原料供应商"
                value={supplier}
                dropdownStyle={{
                  maxHeight: 400,
                  overflow: 'auto',
                }}
                treeData={treeData}
                treeDefaultExpandAll
                onChange={onChangesupplier}
              />
            </td>
            <td className="right"> 供应商等级： </td>
            <td align="center">
              {' '}
              <Select
                defaultValue="一级供应商"
                style={{ width: '166px', textAlign: 'left' }}
                options={[
                  { value: '一级供应商', label: '一级供应商' },
                  { value: '二级供应商', label: '二级供应商' },
                  { value: '三级供应商', label: '三级供应商' },
                ]}
              />{' '}
            </td>
          </tr>

          <tr height="47">
            <td className="right">所在省份：</td>
            <td align="center">
              {' '}
              <Select
                defaultValue={provinceData[0]}
                style={{
                  width: '166px',
                  textAlign: 'left',
                }}
                onChange={handleProvinceChange}
                options={provinceData.map((province) => ({
                  label: province,
                  value: province,
                }))}
              />
            </td>
            <td className="right"> 所在市区： </td>
            <td align="center">
              <Select
                style={{
                  width: 166,
                  textAlign: 'left',
                }}
                value={secondCity}
                onChange={onSecondCityChange}
                options={cities.map((city) => ({
                  label: city,
                  value: city,
                }))}
              />{' '}
            </td>
            <td className="right"> 所属行业： </td>
            <td align="center">
              {' '}
              <Select
                defaultValue="汽车行业"
                style={{ width: '166px', textAlign: 'left' }}
                options={[
                  { value: '汽车行业', label: '汽车行业' },
                  { value: '医疗行业', label: '医疗行业' },
                  { value: '工程行业', label: '工程行业' },
                  { value: '电子行业', label: '电子行业' },
                  { value: '食品行业', label: '食品行业' },
                ]}
              />
            </td>
            <td className="right"> 联系人： </td>
            <td align="center">
              {' '}
              <Input style={{ width: '166px' }} />{' '}
            </td>
          </tr>

          <tr height="47">
            <td className="right">部门：</td>
            <td align="center">
              {' '}
              <Input style={{ width: '166px' }} />
            </td>
            <td className="right"> 职务： </td>
            <td align="center">
              {' '}
              <Input style={{ width: '166px' }} />{' '}
            </td>
            <td className="right"> 性别： </td>
            <td align="center">
              {' '}
              <Radio.Group
                buttonStyle="outline"
                style={{ display: 'flex', justifyContent: 'space-around' }}
                onChange={onChange}
                value={danger}
              >
                <Radio style={{ borderRadius: '50px' }} value={'男'}>
                  男
                </Radio>
                <Radio value={'女'}>女</Radio>
              </Radio.Group>
            </td>
            <td className="right"> 生日： </td>
            <td align="center">
              {' '}
              <DatePicker
                placeholder=""
                onChange={onChangeDate}
                style={{ width: '166px' }}
              />{' '}
            </td>
          </tr>
          <tr height="47">
            <td className="right">籍贯：</td>
            <td align="center">
              {' '}
              <Input style={{ width: '166px' }} />
            </td>
            <td className="right"> 办公电话： </td>
            <td align="center">
              {' '}
              <Input style={{ width: '166px' }} />{' '}
            </td>
            <td className="right"> 手机号码： </td>
            <td align="center">
              {' '}
              <Input style={{ width: '166px' }} />
            </td>
            <td className="right"> 家庭电话： </td>
            <td align="center">
              {' '}
              <Input style={{ width: '166px' }} />{' '}
            </td>
          </tr>
          <tr height="47">
            <td className="right">微信：</td>
            <td align="center">
              {' '}
              <Input style={{ width: '166px' }} />
            </td>
            <td className="right"> QQ： </td>
            <td align="center">
              {' '}
              <Input style={{ width: '166px' }} />{' '}
            </td>
            <td className="right"> 电子邮箱： </td>
            <td align="center">
              {' '}
              <Input style={{ width: '166px' }} />
            </td>
            <td className="right"> 邮编： </td>
            <td align="center">
              {' '}
              <Input style={{ width: '166px' }} />{' '}
            </td>
          </tr>
          <tr height="47">
            <td className="right">公司地址：</td>
            <td align="center">
              {' '}
              <Input style={{ width: '166px' }} />
            </td>
            <td className="right"> 法人代表： </td>
            <td align="center">
              {' '}
              <Input style={{ width: '166px' }} />{' '}
            </td>
            <td className="right"> 注册资本（万元）： </td>
            <td align="center">
              {' '}
              <InputNumber style={{ width: '166px' }} />{' '}
            </td>
            <td className="right"> 人员规模： </td>
            <td align="center">
              {' '}
              <InputNumber style={{ width: '166px' }} />{' '}
            </td>
          </tr>
          <tr height="60">
            <td className="right">公司简介：</td>
            <td align="center" colSpan={7}>
              {' '}
              <Input style={{ height: '45px', width: '97%' }} />
            </td>
          </tr>
        </table>

        {/* 业务情况 */}
        <table border="1" cellSpacing={1} cellPadding={1}>
          <tr height="36" className="thead">
            <td colSpan={2} align="left">
              业务情况
            </td>
          </tr>
          <tr>
            <td className="right">合作情况简介：</td>
            <td style={{ padding: '10px' }}>
              <Input style={{ height: 139 }}></Input>
            </td>
          </tr>
        </table>

        {/* 财务信息 */}
        <table border="1" cellSpacing={1} cellPadding={1}>
          <tr height="36" className="thead">
            <td colSpan={8} align="left">
              财务信息
            </td>
          </tr>
          <tr height="47">
            <td className="right">开户银行：</td>
            <td align="center">
              {' '}
              <Input style={{ width: '166px' }} />
            </td>
            <td className="right"> 账户名称： </td>
            <td align="center">
              {' '}
              <Input style={{ width: '166px' }} />{' '}
            </td>
            <td className="right"> 银行账号： </td>
            <td align="center">
              {' '}
              <Input style={{ width: '166px' }} />{' '}
            </td>
            <td className="right"> 纳税人识别号： </td>
            <td align="center">
              {' '}
              <Input style={{ width: '166px' }} />{' '}
            </td>
          </tr>
          <tr height="47">
            <td className="right">地址：</td>
            <td align="center">
              {' '}
              <Input style={{ width: '166px' }} />
            </td>
            <td className="right"> 电话： </td>
            <td align="center">
              {' '}
              <Input style={{ width: '166px' }} />{' '}
            </td>
            <td className="right"> </td>
            <td align="center"> </td>
            <td className="right"> </td>
            <td align="center"> </td>
          </tr>
          <tr height="47">
            <td className="right">账期（天）：</td>
            <td align="center">
              {' '}
              <InputNumber style={{ width: '166px' }} />
            </td>
            <td className="right"> 每月几号结算： </td>
            <td align="center">
              {' '}
              <InputNumber style={{ width: '166px' }} />{' '}
            </td>
            <td className="right"> </td>
            <td align="center"> </td>
            <td className="right"> </td>
            <td align="center"> </td>
          </tr>
        </table>

        {/* 附件 */}
        <table border="1" cellSpacing={1} cellPadding={1}>
          <tr height="36" className="thead">
            <td colSpan={9} align="left">
              附件{' '}
              <Button className="btn" size="default">
                批量上传
              </Button>
            </td>
          </tr>
          <tr height="47">
            <td style={{ paddingLeft: '10px' }} width={500}>
              文件名称
            </td>
            <td align="center" width={100}>
              文件大小
            </td>
            <td align="center" width={100}>
              上传人
            </td>
            <td align="center" width={150}>
              上传时间
            </td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
          <tr height="60"></tr>
        </table>
      </div>
    </div>
  );
}
